<template>
<div class="showpage">

<blg-heand></blg-heand>
    
<!-- 主体部分 -->
<el-row class="w">
<el-col :span='18'>
<blg-item v-for="item in data" :key="item.id"
:title="item.title"
:artictype="item.type"
:uid="item.uid"
:id="item.id"
></blg-item>
</el-col>
<el-col :span='6'>
<mycard/>
<arccard @tagcard="getTag" />
</el-col >
</el-row>


 <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :hide-on-single-page="isshow"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination> -->
<!-- 解析markdown 为 HTML -->
<VueShowdown
  :markdown="htms"
  flavor="github"
  :options="{ emoji: true }"/>

<!-- <blg-footer></blg-footer> -->
</div>
  
</template>

<script>
import heander from '../components/header.vue'
import fotter from '../components/footer.vue'
import issue from '../components/issue.vue'
import articleitem from '../components/articleitem.vue'
import mycard from '../components/mycard.vue'
import arccard from '../components/arccard.vue'
import { VueShowdown } from 'vue-showdown'

import bus from '../components/bus'
export default {
    name:"Show",
    components: {
     'blg-heand': heander,
     'blg-footer': fotter,
      VueShowdown,
      issue,
      'blg-item':articleitem,
      mycard,
      arccard,
    },
    created(){
      bus.$on('mdtext',(val)=>{
          console.log('父组件的'+val.msg);
          this.htms=val.msg
      })
      this.initArticData();
      //初始化数据
    
    },
    data(){
        return {
            htms: "",
            isshow:true,//是否隐藏分页栏，true为隐藏。
            data:[],
        }
    },
    methods:{
      async initArticData(){
          const datas = await this.axios.get("/article/getall");
          console.log(datas);
          this.data = datas.data;
          console.log(this.data);
      },
      async getTag(val){
          console.log('分类查询的tag'+val);
          const datas = await this.axios.get("/article/getbytag",{
            params:{
              tag:val
            }
          });
          if(datas.data.length>0){
            this.data = datas.data;
          }else{
            alert("暂无此分类内容")
            this.initArticData();
          }
          
          console.log(this.data);
      },
      handleCurrentChange(){},
      handleSizeChange(){},
      currentPage3(){},
    },
    watch:{
      $route(to,from){
            if(to.path==='/show'){
            console.log(to);
            console.log(from);
            this.initArticData();
            }   
        }
    }
}
</script>

<style>
.w{
  width: 80%;
  margin: 0 auto;
}
.el-pagination{
  width: 100%;
  margin: 20px 0;
}
</style>>
